<template>
  <a-drawer
    :visible="visible"
    class="custom-class"
    :width="460"
    style="color: red"
    :title="dtawer_title"
    @close="onClose"
    placement="right"
    :zIndex="200"
  >
    <div class="content_box">
      <a-form layout="vertical" ref="formRef_dom">
        <a-form-item label="标题" name="title" v-bind="validateInfos.title">
          <a-input
            label="标题"
            v-model:value="formRef.title"
            placeholder="请输入标题"
          />
        </a-form-item>
        <a-form-item label="副标题" v-bind="validateInfos.sub_title">
          <a-input
            v-model:value="formRef.sub_title"
            placeholder="请输入副标题"
          />
        </a-form-item>
        <a-form-item label="文案" v-bind="validateInfos.content">
          <extractCopyWriting
            v-model:value="formRef.content"
            :extraID="extraID"
            @openAI="openAI"
            @openVideo="openVideo"
            @update="update"
            @chai_ing="chai_ing"
          ></extractCopyWriting>
        </a-form-item>
      </a-form>
    </div>

    <div
      :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px',
      }"
    >
      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      <a-button type="primary" @click="ok" :loading="btnLoading">确定</a-button>
    </div>
  </a-drawer>
</template>

<script setup>
import {
  ref,
  reactive,
  computed,
  onMounted,
  watch,
  createVNode,
  inject,
  nextTick,
} from "vue";
import { Form, message } from "ant-design-vue";
import extractCopyWriting from "@/views/shotstack/AiCreation/components/extraCopywriting.vue";
import addAiCreate from "@/views/shotstack/AiCreation/components/addAiCreate.vue";
import request from "@/common/utils/request";
import { debounce } from "lodash";

const useForm = Form.useForm;

const props = defineProps({
  visible: {
    type: Boolean,
    default: true,
  },
  AIText: {
    type: String,
    default: "",
  },
  currentCateId: {
    type: String,
    default: "",
  },
  extraID: {
    type: String,
    default: "",
  },
  editID: {
    type: String,
    default: "",
  },
  source_Add: {
    type: String,
    default: "",
  },
});

const dtawer_title = ref("新增文案");
const formRef_dom = ref(null);
const formRef = reactive({
  title: "",
  content: "",
  sub_title: "",
});

const source = ref("1");

const rulesRef = ref({
  title: [{ required: true, message: "请输入标题", trigger: "change" }],
});

const { resetFields, validate, validateInfos } = useForm(formRef, rulesRef);

const emit = defineEmits(["cancel", "openAIcreate", "openExtr", "successSub"]);

const openAI = () => {
  emit("openAIcreate");
};

const openVideo = () => {
  emit("openExtr");
};

const ok = debounce(() => {
  validate().then(() => {
    if (dtawer_title.value == "新增文案") {
      let params = {
        merchant_folder_statck_id: props.currentCateId,
        headline: [
          {
            title: formRef.title,
            content: formRef.content,
            sub_title: formRef.sub_title,
          },
        ],
        source: source.value,
      };

      request
        .post("/work_ai", "/user/shotstack/write/add", params)
        .then((res) => {
          message.success("添加成功");
          formRef.title = "";
          formRef.content = "";
          dtawer_title.value = "新增文案";
          emit("successSub");
        });
    } else {
      let params = {
        id: props.editID,
        merchant_folder_statck_id: props.currentCateId,
        title: formRef.title,
        material_content: formRef.content,
        sub_title: formRef.sub_title,
        source: source.value,
      };
      request
        .put("/work_ai", "/user/shotstack/write/update", params)
        .then((res) => {
          message.success("编辑成功");
          Object.assign(formRef, {
            title: "",
            content: "",
            sub_title: "",
          });
          dtawer_title.value = "新增文案";
          emit("successSub");
        });
    }
  });
}, 500); // 设置延迟时间，例如500毫秒

const onClose = () => {
  Object.assign(formRef, {
    title: "",
    content: "",
    sub_title: "",
  });
  dtawer_title.value = "新增文案";
  emit("cancel");
};

const update = (data) => {
  formRef.content = data.contents;
  source.value = data.source;
  btnLoading.value = false;
};

const btnLoading = ref(false);

watch(
  () => props.AIText,
  (newval) => {
    if (newval !== "") {
      formRef.content = newval;
      source.value = "4";
    }
  }
);

watch(
  () => props.source_Add,
  (newval) => {
    if (newval !== "") {
      source.value = newval;
    }
  }
);

// 进入页面 溢出校验
watch(
  () => props.visible,
  (newval) => {
    newval &&
      nextTick(() => {
        resetFields();
      });
  }
);

const chai_ing = () => {
  btnLoading.value = true;
};

// watch(
//   () => props.extraID,
//   (newVal) => {
//     if (!newVal) return;
//     btnLoading.value = true;
//   }
// );

watch(
  () => props.editID,
  (newval) => {
    if (newval !== "") {
      request
        .get("/work_ai", "/user/shotstack/write/detail", {
          id: props.editID,
        })
        .then((res) => {
          dtawer_title.value = "编辑文案";
          formRef.title = res.result.title;
          formRef.sub_title = res.result.sub_title;
          formRef.content = res.result.material_content;
          source.value = res.result.source;
        });
    }
  }
);
</script>

<style lang="less" scoped></style>
